<?php echo $this->render('/public/header'); ?>
    <style>
        input[type=file] {
            display: none
        }
    </style>
    <script src="https://cdn.bootcss.com/element-ui/2.3.8/index.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="stylesheet">
    <div id="main" class="col-lg-12 col-ms-12 col-xs-12 col-md-12">
        <el-button type="primary" @click="visible = true">主要按钮</el-button>
        <el-dialog
                title="提示"
                :visible.sync="visible"
                width="60%">
            <el-form :model="form">
                <el-form-item label="标题名称">
                    <el-input v-model="form.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传文件">
                    <el-upload
                            :show-file-list=false
                            :on-success="handlerSuccess"
                            action="/api/upload/upload-file"
                            v-model="form.file"
                    >
                        <el-button type="primary">上传文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <p>{{form.file}}</p>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

    </div>

    <script>
        new Vue({
            el: "#main",
            data: {
                visible: false,
                form: {
                    title: '',
                    file: ''
                }
            },
            methods: {
                handlerSuccess: function (v) {
                    this.form.file = v.msg;
                },
                submit: function () {
                    if (!this.form.title) {
                        this.$message.error('标题未填');
                        return false;
                    }

                    $.post('/setting/add_announce', this.form, function (res) {
                        console.log(res);
                    }, 'json')
                }
            }
        })
    </script>
<?php echo $this->render('/public/footer'); ?>